/**
 * 主题配置文件
 *
 * 此文件用于集中管理应用的主题配置，包括：
 * - 预设主色调
 * - 默认主题设置
 * - CSS变量映射
 * - 主题切换动画配置
 *
 * 使用指南：
 * 1. 修改默认主题：更改 DEFAULT_THEME_CONFIG
 * 2. 添加新主色调：在 PRESET_COLORS 中添加新颜色
 * 3. 自定义CSS变量：修改 CSS_VARIABLES 映射
 */

// 主题类型定义
export type Theme = 'light' | 'dark' | 'auto'

// 预设主色调配置
export const PRESET_COLORS = [
  { color: '#007aff', name: '经典蓝', description: 'iOS风格的经典蓝色' },
  { color: '#ff3b30', name: '活力红', description: '充满活力的红色' },
  { color: '#32f08c', name: '清新绿', description: '清新自然的绿色' },
  { color: '#ff9500', name: '活力橙', description: '温暖明亮的橙色' },
  { color: '#af52de', name: '神秘紫', description: '神秘优雅的紫色' },
  { color: '#5856d6', name: '靛蓝色', description: '深邃的靛蓝色' },
  { color: '#ff2d92', name: '玫瑰粉', description: '浪漫的玫瑰粉' },
  { color: '#00c5ff', name: '天空蓝', description: '清澈的天空蓝' },
] as const

// 默认主题配置
export const DEFAULT_THEME_CONFIG = {
  theme: 'auto' as Theme,
  primaryColor: '#32f08c', // 与 uni.scss 中的 $uni-color-primary 保持一致
  customColors: {
    primary: '#32f08c',
    success: '#4cd964', // 与 $uni-color-success 保持一致
    warning: '#ff9500', // 与 $uni-color-warning 保持一致
    error: '#ff3b30', // 与 $uni-color-error 保持一致
    info: '#007aff',
  },
} as const

// CSS变量映射配置
export const CSS_VARIABLES = {
  // 主色调相关
  primary: '--primary-color',
  success: '--success-color',
  warning: '--warning-color',
  error: '--error-color',
  info: '--info-color',

  // 背景色相关
  bgColor: '--bg-color',
  pageBg: '--page-bg',
  cardBg: '--card-bg',
  navbarBg: '--navbar-bg',
  tabbarBg: '--tabbar-bg',
  inputBg: '--input-bg',
  buttonBg: '--button-bg',

  // 文字颜色相关
  textColor: '--text-color',
  textColorSecondary: '--text-color-secondary',
  textColorPlaceholder: '--text-color-placeholder',
  textColorDisabled: '--text-color-disabled',

  // 边框和分割线
  borderColor: '--border-color',
  dividerColor: '--divider-color',

  // TabBar相关
  tabbarText: '--tabbar-text',
  tabbarTextActive: '--tabbar-text-active',

  // 遮罩
  maskBg: '--mask-bg',
} as const

// 主题变量值配置
export const THEME_VARIABLES = {
  light: {
    bgColor: '#ffffff',
    pageBg: '#f8f8f8',
    cardBg: '#ffffff',
    navbarBg: '#ffffff',
    tabbarBg: '#ffffff',
    inputBg: '#ffffff',
    buttonBg: '#f0f0f0',
    textColor: '#333333',
    textColorSecondary: '#666666',
    textColorPlaceholder: '#999999',
    textColorDisabled: '#c0c0c0',
    borderColor: '#e5e5e5',
    dividerColor: '#e5e5e5',
    tabbarText: '#999999',
    maskBg: 'rgba(0, 0, 0, 0.4)',
  },
  dark: {
    bgColor: '#1a1a1a',
    pageBg: '#1a1a1a',
    cardBg: '#2a2a2a',
    navbarBg: '#1a1a1a',
    tabbarBg: '#1a1a1a',
    inputBg: '#2a2a2a',
    buttonBg: '#333333',
    textColor: '#ffffff',
    textColorSecondary: '#cccccc',
    textColorPlaceholder: '#999999',
    textColorDisabled: '#666666',
    borderColor: '#333333',
    dividerColor: '#333333',
    tabbarText: '#cccccc',
    maskBg: 'rgba(0, 0, 0, 0.6)',
  },
} as const

// 动画配置
export const ANIMATION_CONFIG = {
  duration: 300,
  timingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
  debounceDelay: 16, // 防抖延迟，约一帧时间
} as const

// 阴影配置
export const SHADOW_CONFIG = {
  light: {
    light: '0 2px 8px rgba(0, 0, 0, 0.1)',
    medium: '0 4px 16px rgba(0, 0, 0, 0.15)',
    heavy: '0 8px 32px rgba(0, 0, 0, 0.2)',
  },
  dark: {
    light: '0 2px 8px rgba(0, 0, 0, 0.3)',
    medium: '0 4px 16px rgba(0, 0, 0, 0.4)',
    heavy: '0 8px 32px rgba(0, 0, 0, 0.5)',
  },
} as const

/**
 * 获取主题变量
 * @param isDark 是否为深色模式
 * @param primaryColor 主色调
 * @param customColors 自定义颜色
 * @returns CSS变量对象
 */
export function getThemeVariables(
  isDark: boolean,
  primaryColor: string,
  customColors: Record<string, string> = {},
): Record<string, string> {
  const baseTheme = isDark ? THEME_VARIABLES.dark : THEME_VARIABLES.light
  const shadows = isDark ? SHADOW_CONFIG.dark : SHADOW_CONFIG.light

  return {
    // 基础主题变量
    ...Object.entries(baseTheme).reduce((acc, [key, value]) => {
      const cssVar = CSS_VARIABLES[key as keyof typeof CSS_VARIABLES]
      if (cssVar) {
        acc[cssVar] = value
      }
      return acc
    }, {} as Record<string, string>),

    // 主色调
    [CSS_VARIABLES.primary]: primaryColor,

    // 自定义颜色
    ...Object.entries({ ...DEFAULT_THEME_CONFIG.customColors, ...customColors }).reduce((acc, [key, value]) => {
      acc[`--${key}-color`] = value
      return acc
    }, {} as Record<string, string>),

    // TabBar激活色使用主色调
    [CSS_VARIABLES.tabbarTextActive]: primaryColor,

    // 阴影变量
    '--shadow-light': shadows.light,
    '--shadow-medium': shadows.medium,
    '--shadow-heavy': shadows.heavy,
  }
}

/**
 * 应用CSS变量到DOM
 * @param variables CSS变量对象
 */
export function applyCSSVariables(variables: Record<string, string>): void {
  if (typeof document === 'undefined')
    return

  const root = document.documentElement
  const style = root.style

  // 使用 requestAnimationFrame 优化性能，减少重绘次数
  requestAnimationFrame(() => {
    Object.entries(variables).forEach(([key, value]) => {
      style.setProperty(key, value)
    })
  })
}

/**
 * 添加主题过渡动画
 */
export function addThemeTransition(): void {
  if (typeof document === 'undefined')
    return

  document.body.classList.add('theme-transition')
  setTimeout(() => {
    document.body.classList.remove('theme-transition')
  }, ANIMATION_CONFIG.duration)
}

/**
 * 设置页面主题属性
 * @param isDark 是否为深色模式
 */
export function setThemeAttribute(isDark: boolean): void {
  if (typeof document === 'undefined')
    return

  document.documentElement.setAttribute('data-theme', isDark ? 'dark' : 'light')
}
